<div class="steps">
    <div class="steps-items">
        <div *ngFor="let item of processNodes" #{{item.value}} class="steps-item" [ngClass]="badge(item)" (click)="move(item.value)">
            <div class="item-container">
                <div class="item">
                    <span class="item-text" [innerHtml]='item.processName'></span>
                </div>
            </div>
            <div class="item-line-bar"></div>
        </div>
    </div>
    <div class="steps-content">
        <div class="steps-Introduction">
            <div class="card">
                <div class="card-body">
                    <div class="instrument-title">
                        <h4>基本信息</h4>
                        <a class="" href="javascript: void(0)" (click)="toggle()">{{isOpen?'收起':'展开'}}</a>
                    </div>
                    <hr/>
                    <p class="instrument-title-header">
                        <span>线索登记时间：{{insertDate}}</span>
                        <span>登记人：{{registUerName}}</span>
                        <span>办案人员：</span>
                        <span *ngFor="let item of caseUserName">{{item}}</span>
                    </p>
                    <div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container ">
                        <p>案件描述：{{registerContent}}</p>
                        <div class='currentPersonInfo'>
                            <h4>当事人信息</h4>
                            <p class='partyName'>名称（姓名）：{{cmsCaseInfo.partyName}}</p>
                            <p class='partyAddress'>地址（住址）：{{cmsCaseInfo.addressDetail}}</p>
                            <p class='partyPhone'>联系电话：{{cmsCaseInfo.partyPhone}}</p>
                            <p class='partyOtherPhone'>其他联系方式：{{cmsCaseInfo.partyOtherPhone}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div *ngFor="let stepItem of processNodes" class="card" [ngClass]="stepItem.value" [hidden]="!(stepItem.documentData.length > 0 || stepItem.evidenceData.length > 0)">
            <div class="card-body">
                <h4>{{stepItem.name}}</h4>
                <table>
                    <thead>
                        <tr>
                            <th style="width:50px;">序号</th>
                            <th class="text-left" style="width:75%;">名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of stepItem.documentData; let i=index">
                            <td style="width:50px;">{{i+1}}</td>
                            <td class="text-left hover-card-container" appHide [doctype]="item.doctype" [docid]="item.docid" (getdocs)="getApproveFlow(item.docid)">
                                <ng-container *ngIf="item.doctype !== '其他'">
                                    <a href="javascript: void(0)" (click)="view(item.docid, item.doctype,item)">  
                                      <span class='filename'>{{item.filename}}</span> 
                                      <div class="badge" [ngClass]="badgeApprove(item.approveStatus)">{{item.approveStatus}}</div>
                                    </a>
                                  </ng-container>
                                  <ng-container *ngIf="item.doctype == '其他'">
                                      <a href="javascript: void(0)" (click)="showModal(item.mediatype,item.fileid,'bizfile')">  
                                        <div class="img-icon instrument" [ngClass]="item.filename|fileType"></div>
                                        <span class='filename'>{{item.filename}}</span> 
                                        <div class="badge" [ngClass]="badge(item)">{{item.approveStatus}}</div>
                                      </a>
                                  </ng-container> 
                                <!-- <button nz-button nzType="default" class="hover-card-reload-btn" nzShape="circle" (click)="approveReload(item.docid)">
                                  <i nz-icon nzType="reload"></i> 
                                </button> -->
                                <div class="card hover-card">
                                    <ng-container *ngIf="approveFlow && approveFlow.length > 0; else elseTemplate">
                                        <div class="hover-card-steps">
                                            <div class="hover-card-steps-item" *ngFor="let approveItem of approveFlow">
                                                <div class="hover-card-steps-icon" [ngClass]="approveItem.hasApproved=='1'?'success':'primary'"></div>
                                                <div class="hover-card-steps-text">
                                                    <p><span>{{approveItem.approvalLink}}</span> - <span>{{approveItem.approveStatus||'—— ——'}}</span></p>
                                                    <p><span>提交人</span>：<span>{{approveItem.approver||'—— ——'}}</span></p>
                                                    <p><span>{{approveItem.approveDate||'—— ——'}}</span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </ng-container>
                                    <ng-template #elseTemplate>
                                        <div style="margin:0 auto;position: relative;height:100%;">
                                            <img style="position: absolute;width: 100px;height: 87px; top: 50%;left: 50%;transform:translate(-50%,-50%);" src=''>
                                            <p style="
                                                  transform:translate(-50%,-50%);
                                                  position: absolute; 
                                                  font-size:14px;
                                                  width:180px;
                                                  height:14px; 
                                                  text-align: center;
                                                  margin-top:45px;
                                                  top:50%;
                                                  left: 50%;" class="ant-empty-description">
                                                暂无数据
                                            </p>
                                        </div>
                                    </ng-template>
                                </div>
                            </td>
                            <td class="text-left">
                                <a class='text-btn' href="javascript:void(0)" *ngIf="item.doctype !='其他' &&item.docSource !='三方系统'" (click)="view(item.docid, item.doctype,item)">查看</a>
                                <span *ngIf="item.doctype =='其他' && item.docSource !== '三方系统'">
                                  <a class='text-btn' href="javascript:void(0)" *ngIf="(item.mediatype !=null) && (((item.mediatype).indexOf('video') == 0)||((item.mediatype).indexOf('audio') == 0)||((item.mediatype).indexOf('image') == 0))"  (click)="showModal(item.mediatype,item.fileid,'bizfile')">查看</a>
                                </span> 
                                <!-- <a class='text-btn' href="/download/bizfile/{{item.fileid}}">下载</a> -->
                                <a class='text-btn a_download' (click)='download(item.fileid,item.filename,"bizfile")'>下载</a>
                                
                                <span *ngIf="item.approveStatus=='待审批' && oprea != 'look'">
                                  <a class='text-btn' (click)="approval(item.docid,item.doctype)" href="javascript:void(0)">审批</a>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table style="margin-top: 10px;">
                    <tr *ngFor="let item of stepItem.evidenceData; let i=index">
                        <td style="width:50px;">{{i+1}}</td>
                        <td style="width:75%;" class="text-left hover-card-container">
                            <a href="javascript: void(0)">
                                <div class="img-icon instrument"></div>
                                <span><a  class='a_download' (click)='download(item.fileId,item.fileName,"evidence")'>{{item.fileName}}</a> </span>
                            </a>
                        </td>
                        <td class="text-left">
                            <a class='text-btn' href="javascript:void(0)" *ngIf="((item.contentType).indexOf('video') == 0)||((item.contentType).indexOf('audio') == 0)||((item.contentType).indexOf('image') == 0)" (click)="showModal(item.contentType,item.fileId,'evidence')">查看</a>
                            <a class='text-btn a_download' (click)='download(item.fileId,item.fileName,"evidence")'>下载</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <nz-modal [(nzVisible)]="isVisible" nzMaskClosable="false" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
        <ng-template #modalTitle>
            证据详情
        </ng-template>

        <ng-template #modalContent>
           <!-- 文件类型为PDF -->
            <!-- <div *ngIf="publictypeFlag.includes('pdf')" >
              <pdf-viewer [src]="url" 
              [render-text]="true"
              (after-load-complete)='afterLoadPdf($event)'
              style="display: block;"
              ></pdf-viewer>
            </div> -->

            <!-- 文件类型为视频 -->
            <div *ngIf="publictypeFlag.includes('video')">
                <ng-container *ngIf='!typeFlag'>
                    <nz-spin nzSimple style='margin-top:10px'></nz-spin>
                </ng-container>
                <ng-container ngIf='typeFlag'>
                <vg-player>
                    <video id="my-video" #video [vgMedia]="video" style="width:100%;height:auto;" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" autoplay>
                    <source [src]="url"  >
                    <p class="vjs-no-js">播放视频需要启用JavaScript，推荐使用支持HTML5的浏览器访问。
                        To view this video please enable JavaScript, 
                        and consider upgrading to a web browser that
                    <a href="http://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video</a>
                    </p>
                </video>
                </vg-player>
              </ng-container>
            </div>
            <!-- 文件类型为音频 -->
            <div *ngIf="publictypeFlag.includes('audio')">
                <ng-container *ngIf='!typeFlag'>
                    <nz-spin nzSimple style='margin-top:10px'></nz-spin>
                </ng-container>
                
                <ng-container  *ngIf='typeFlag'>
                <vg-player style="height: 50px;" (onPlayerReady)="onPlayerReady($event)">
                    <vg-controls vgFor='myAudio'>
                        <vg-play-pause></vg-play-pause>
                        <vg-playback-button></vg-playback-button>

                        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

                        <vg-scrub-bar>
                            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                        </vg-scrub-bar>

                        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

                        <vg-mute></vg-mute>

                        <vg-fullscreen></vg-fullscreen>
                    </vg-controls>

                    <audio #audio class="audio" [vgMedia]="audio" id='myAudio' type='audio/mp3' autoplay=false preload="auto">
                    <source [src]="url">
                </audio>
                </vg-player>
                </ng-container>

            </div>
            <!-- 文件类型为图片 -->
            <div *ngIf="publictypeFlag.includes('image')">
                <ng-container *ngIf='!typeFlag'>
                    <nz-spin nzSimple style='margin-top:10px'></nz-spin>
                </ng-container>
                <ng-container *ngIf='typeFlag'>
                    <div>
                        <img [src]="url" alt="" style="display: block;width:100%;height:100%;">
                    </div>
                </ng-container>
            </div>
        </ng-template>

        <ng-template #modalFooter>
            <button nz-button nzType="primary" (click)="handleCancel()">关闭</button>
        </ng-template>
    </nz-modal>
</div>
<app-docdesk [isExpand]='isExpand' *ngIf="oprea!='look'" (expandAnimationFlag)='cardToggle($event)' [bizfile]="bizfile"></app-docdesk>